<template>

  <div class="shopsDetail">
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/staff' }">用户列表</el-breadcrumb-item>

        <el-breadcrumb-item v-if="vm.isEdit">编辑用户 #{{id}}</el-breadcrumb-item>
        <el-breadcrumb-item v-else>添加用户</el-breadcrumb-item>

      </el-breadcrumb>

    </el-row>
    <div class="content">



      <el-form ref="form" label-width="140px" style="margin-top: 20px;padding: 40px;background: #f9f9f9">
        <el-row :gutter="12" style="margin-top: 20px">

          <el-col :span="16">

            <el-form-item label="用户名">

              <el-input v-model="form.username" placeholder="请输入用户名,用户名为4-16字符"></el-input>
            </el-form-item>

            <el-form-item label="手机号">

              <el-input v-model="form.phone" placeholder="请填写11位的手机号"></el-input>
            </el-form-item>
            <el-form-item label="密码">

              <el-input v-model="form.password" placeholder="请填写密码, 最小长度为8字符"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">

              <el-input v-model="form.confirmPassword" placeholder="重复输入密码"></el-input>
            </el-form-item>
            <el-form-item label="权限管理" id="role-manage">
              <span>数据管理</span>

              <el-switch v-model="form.base_access"></el-switch>
              <span>用户管理</span>

              <el-switch v-model="form.user_management"></el-switch>
              <span>方案审核</span>
              <el-switch v-model="form.schema_audit"></el-switch>
              <span>订单管理</span>
              <el-switch v-model="form.order_management"></el-switch>
              <span>仓储管理</span>
              <el-switch v-model="form.storage_management"></el-switch>

            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <!--"token":""，-->
            <!--"add":1 // 表示添加 修改可传0 或不传-->
            <!--"id":12, //账号id 修改时传-->
            <!--"username":"",  //客户名-->
            <!--"password":"",-->
            <!--"phone":""，-->
            <!--"base_access":"",-->
            <!--"schema_audit":"",-->
            <!--"user_management":""-->
            <!--"order_management":"",  //客户名-->
            <!--"storage_management":""-->


          </el-col>

        </el-row>


        <el-form-item>

          <el-button v-if="id>0" :disabled="!vm.canSave" type="primary" :loading="vm.saving" @click="add">保存</el-button>
          <el-button v-else :disabled="!vm.canAdd" type="primary" :loading="vm.adding" @click="update">新增</el-button>
          <!--<el-button @click="refuse" type="danger">取消</el-button>-->
        </el-form-item>
      </el-form>

    </div>

  </div>
</template>
<style>
  #role-manage span{margin-left: 8px;color: #666}
  #role-manage .el-switch__button{
    margin-left: 0;
  }
</style>
<script>
  import * as Staff from '@/api/staff'

  export default{
    computed: {

    },
    data(){
      return{
        vm:{
          isEdit:false,
          schema:[],
          vehicle:[],
          threadMan:{name:'',phone:''},
          staff:{name:'',phone:''},
          custom:[],
          isLoading:false,
          isError:false,
          models:[],
          submit_time:'',
          canAudit:true,
          message:'',
          canSave:true,
          canAdd:true

        },


        form: {

        }
      }
    },

    mounted() {
      if(this.$route.params.id>0){
        this.vm.isEdit=true;
        this.id=this.$route.params.id;
      }
      this.query();

    },
    methods: {

      add(){
        var that=this;

        Staff.add(that.form).then(function(res){
          console.log(res)

        })

      },
      update(){
        var that=this;
        Staff.update(that.form).then(function (res) {
          console.log(res)

        })
      },


      query:function(){
        var that=this;
        Staff.get({id:that.id}).then(function(res){
          console.log(res)

        });


      }



    }


  }
</script>
